<!DOCTYPE html>
<!-- <html lang="en"> 一般是翻译转换用到的-->
<html lang="zh-CN">
  <!-- head包括文档的标题，引用的文档样式和脚本等 -->
  <head>
    <!-- 字符编码 -->
    <meta charset="UTF-8" />
    <!-- IE适配 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 文档的标题 -->
    <title>Document</title>
  </head>
  <style>
    .title {
      height: 300px;
      border: 1px solid red;
    }
    .image {
      display: flex;
      width: 300px;
      height: 300px;
    }
    .area {
        border: 1px solid red;
    }
    .gaoliang{
        font-size: 20px;
        color: skyblue;
    }
  </style>
  <body>
    <!-- html全局属性  id class style title -->
    <!-- 常见元素: h元素 -->
    <div class="title">
      <h1>我是h1标题</h1>
      <h2>我是h2标题</h2>
      <h3>我是h3标题</h3>
      <h4>我是h4标题</h4>
      <h5>我是h5标题</h5>
      <h6>我是h6标题</h6>
    </div>
    <!-- 常见元素: p元素 -->
    <div>
      <p>
        2023年全国高考明日开启，十年一搏六月梦，赢得寒窗锦绣程。全力拼搏过的你定将金榜题名，大胜归来！@高考生
        加油，少年！
      </p>
      <!-- 注意:下边距和上边距会合并 -->
      <p>
        63岁林瑞阳罕见曝光：白头发白眉毛，容貌特怪异，号召去国外发财
        影像温度06-04 17:24 播报 01:00
        小区业委会主任被长期聘为秘书，月薪高达7654元业主却豪不知情
      </p>
    </div>
    <!-- 常见元素: img元素 可替换元素 -->
    <div class="image">
      <!-- 网络图片 -->
      <img
        width="300"
        src="http://tiebapic.baidu.com/forum/w%3D580/sign=e57eb312cf13632715edc23ba18da056/04c9174d510fd9f9238b7aa7602dd42a2934a417.jpg?tbpicau=2023-06-09-05_e016070fc2575b03be4306743232cd84"
        alt="萝莉"
      />
      <!-- 本地图片 
            1> 绝对路径(absolute):  根盘符开始查找,一直找到这个资源
            2> 相对路径(relative):   . 当前文件夹 .. 上级文件夹
        -->
      <img
        width="300"
        src="C:\workspace\web-md\前端学习之旅\HTML\images\1.jpg"
        alt="萝莉"
      />
      <img width="300" src="./images/1.jpg" alt="萝莉" />
    </div>
    <!-- 常见元素: a元素  跳转到另外一个链接 -->

    <div class="a">
      <!-- href 打开的url地址 -->
      <!-- target:
            _self: 默认值 在当前窗口打开url 
            _blank: 在一个新的窗口打开url 
            其他不常用 IFRAME会说 -->
      <a href="http://www.baidu.com" target="_self">百度一下</a>
      <a href="../../html/love.html" target="_self">本地路径</a>
    </div>

    <!-- 锚点a标签start -->
    <div>
      <div>目录:</div>
      <a href="#theme01">跳转主题一</a>
      <a href="#theme02">跳转主题二</a>
      <a href="#theme03">跳转主题三</a>
    </div>
    <div class="amaodian">
      <!-- href 打开的url地址 锚点 -->
      <!-- target:
            _self: 默认值 在当前窗口打开url 
            _blank: 在一个新的窗口打开url
            _parent: 父级窗口
            _top: 多级
            其他不常用 IFRAME会说 -->

      <!-- <h2 id="theme01">主题一</h2>
            <p>喵喵喵~   <br>   嘻嘻嘻~</p>
            <h2 id="theme02">主题二</h2>
            <p>123 <br>  <br>  <br>  <br>  <br>  <br>  <br> </p>
            <h2 id="theme03">主题三</h2>
            <p>567 <br>  <br>  <br>  <br>  <br> </p> -->
    </div>
    <!-- 锚点a标签end -->
    <!-- 图片a标签start -->
    <div>
      <a href="http://www.baidu.com" target="_blank">
        <img
          width="300"
          src="https://www.baidu.com/img/PCgkdoodle_293edff43c2957071d2f6bfa606993ac.gif"
          alt="萝莉"
        />
      </a>
    </div>
    <!-- 图片a标签end -->
    <!-- zip mail :a标签start -->
    <div>
      <a href="1.zip" target="_blank">zip包</a>
      <a href="mailto:123@">发邮件</a>
    </div>
    <!-- zip mail :a标签a标签end -->
    <!-- iframe 标签 ---start -->
    <!-- 响应头 X-Frame-Options:SAMEORIGIN  其他页面不会引入-->
    <!--frameborder 属性  0-隐藏  1-显示-->
    <iframe width="800" src="http://www.taobao.com" frameborder="0"></iframe>
    <iframe width="800" src="http://www.mi.com" frameborder="0"></iframe>
    <!-- iframe 标签 ---end -->
    <!-- 常用元素: div start -->
    <div>
      <h1>学习前端</h1>
      <div class="area">
        <h2>学习HTML+css</h2>
        <p>先学习HTML,再学习CSS,了解一些历史/本质等等</p>
      </div>
      <div class="area">
        <h2>学习JavaScript</h2>
        <p>
          学习  <span class="gaoliang">JavaScript</span> 的基本语法,BOM/DOM,学网络请求,学习ES6~12,学习一些高级语法,原理
        </p>
      </div>
      <div class="area">
        <h2>学习工具</h2>
        <p>npm/node/webpack/git</p>
      </div>
    </div>
    <!-- 常用元素: div end -->
    
    <!-- 不常用元素: div start -->
    <p>变大<strong>变粗</strong><i>变斜</i></p>
    <!-- 换行 -->
    <br> 
    <code>
        let a = '520'
    </code>
    <!-- 不常用元素: div end -->

    <!-- 额外补充 字符 -->
    <h2>&lt;字符实体&gt;</h2>
    <img width="600" src="./images/code.jpg" alt="字符实体">
  </body>

  <!-- 2023-06-07 -->
</html>
